<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Title</title>
    <link th:href="@{../layui/css/layui.css}" rel="stylesheet" />
    <link th:href="@{../layui/css/layui.css}" rel="stylesheet" />
    <link th:href="@{../css/bootstrap.min.css}"  rel="stylesheet">
    <link th:href="@{../css/font-awesome.min.css}"  rel="stylesheet">
    <link th:href="@{../css/animate.min.css}" rel="stylesheet">
    <link th:href="@{../css/style.min.css}"  rel="stylesheet">
</head>
<script th:src="@{../js/jquery.min.js}"></script>
<script th:src="@{../js/bootstrap.min.js}"></script>
<script th:src="@{../js/plugins/metisMenu/jquery.metisMenu.js}" ></script>
<script th:src="@{../js/plugins/slimscroll/jquery.slimscroll.min.js}" ></script>
<script th:src="@{../js/plugins/layer/layer.min.js}" ></script>
<script th:src="@{../js/hplus.min.js}" ></script>
<script type="text/javascript" th:src="@{../js/contabs.js}" ></script>
<script th:src="@{../js/plugins/pace/pace.min.js}"></script>
<script th:src="@{../layui/layui.js}"></script>
<body height="100%" width="100%">
    <div>
        <span class="layui-breadcrumb" lay-separator=">>">
          <a>数据同步</a>
          <a><cite>增量同步监控</cite></a>
        </span>
    </div>


    <div class="tab-pane addSynRecord" id="addSynRecord" >
        <table class="layui-hide" id="adminList"></table>
    </div>
</body>

<script>
    layui.use('table', function(){
        var table = layui.table;
    });
</script>
<script  th:inline="none">

    layui.use(['table'], function(){
        var table = layui.table;//使用数据表格

        table.render({
            elem: '#adminList',//选择html中对应的数据表格ID
            url:'/synData/getSynStatistics',//分页提交到spring boot 代码的映射名称
            method:'POST',
            where: {synType: 1},
            limit:8,//每页显示的记录数量
            limits:[5,8,10,15,20],//可选择每页显示的数量
            page: true,//开启分页

            //设置表头的数组
            //field：后台传回的数字字段名，
            //title：表头文字
            //templet: function(data){} 数据表格请求后台回调函数，处理数据
            //return  表示在对应的列中输出的内容
            cols: [[
                // {field:'monitoringId' ,title:'ID'},
                {field:'tableName', title:'视图名称'},
                {field:'monitoringTime',title:'同步时间'},
                {field:'synType',title:'同步类型',
                    templet: function(data){
                        if(data.synType==1){
                            return 	"<span>增量同步</span>";
                        }else if(data.synType==2){
                            return "<span>全量同步</span>";
                        }else{
                            return "<span>保密</span>";
                        }
                    }
                },
                {field:'synCount',title:'同步数量' ,width:100},

                // {field:'state',width:80,title:'状态',
                // 	templet: function(data){
                // 		if(data.state==1){
                // 			return "<span>正常</span>";
                // 		}else{
                // 			return "<span>受限</span>";
                // 		}
                // 	}
                // },
                {fixed: 'right',title:'操作'
                    , templet: function(data){
                        return 	"<a href='AdminInfo?id="+data.id+"' title='查看' class='layui-btn layui-btn-xs layui-btn-normal'><icon class='layui-icon'>&#xe60b;</icon></a>"
                    }
                }
            ]],
            done:function(res, curr, count){
                console.log("表格渲染完成：");
                console.log(res);
                console.log(curr);
                console.log(count);
            }

        });
    });

</script>
</html>